<template>
  <div class="content">
        <div class="headers">
          <div class="title_text">今日特价</div>
          <div class="title_text num"><b>9999</b>件</div>
        </div>
        <div class="text_container">
          <div class="item_text">注册就送</div>
          <div class="item_text ">比特币礼包</div>
        </div>
         <div class="code_img">
           <a   ref="invationQrcode" @click="toImage">
             <img class="codeimg" src="../../assets/meet/code.png" alt />
           </a>
        </div>
        <div class="new_friend">
              常按识别二维码，领取比特币
        </div>
        <div class="user_containers">
            <div class="subItem">
                <img class="imgbox" src="../../assets/meet/gerenzhongxin@2x.png" alt />
             </div>
              <div class=" userinfo">
                  <span>多来梦多来梦</span><br/>
                  <span>多来梦多来梦</span>

             </div>
        </div>
    </div>
</template>


<script>
  import MainLayout from '../../components/MainLayout';
  import html2canvas from 'html2canvas'; // 追記

  export default {
    name: "Login",
    components: {
      //someComponent
      MainLayout
    },
    props: {},
    data() {
      return {
        msg: "Hello Vue.js",
      }
    },
    computed: {},
    watch: {},
    mounted: function () {
    },
    methods: {
      toImage() {
        html2canvas(this.$refs.invationQrcode)
          .then(canvas => {
            let saveFile = function(data, filename) {
              var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
              save_link.href = data;
              save_link.download = filename;
              var event = document.createEvent('MouseEvents');
              event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
              save_link.dispatchEvent(event);
            };
            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            saveFile(pageData.replace('image/jpeg', 'image/octet-stream'), '下载' + '.jpeg');
          });
      },
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#app{
  margin-top: 0px;
}
.content{
  background:#FF681C;
  background-image: url('../../assets/meet/bg.png');
  height: 100vh;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;

}
.code_img{
  margin-top:28vh
}
.footers{
  height: 100px;
    background: #fff;
    position: absolute;
    width: 100%;
    bottom: 0px;

}
.codeimg{
   height: 10vh;
}
.title{
  color:#848DA3;
  margin:2vh;
}
.headers{
   background-image: url('../../assets/meet/xingzhuang@2x.png');
   height: 20vh;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 3vw;
    align-items: center;

    position: absolute;
    right: 3vw;
}
.container{
  display: flex;
    justify-content: space-evenly;
}
.title_text{
  color:#DE4C1E;
  padding: 2vw;
  font-size: 4vw;

}
.text_container{
    padding-top: 14vh;
    font-size: 24px;
    color: #fff;
    height: 30vh;
    color: 8vw;
    font-family: cursive;
}
.item_text{
  padding:2vw;
  font-weight: bolder;
}
.new_friend{
 color: #fff;
    margin: 5vh 10vw 0vh;
    border-radius: 10px;
    background: #F35217;
    padding: 2vw 8vw;
}
.footers{
  height: 130px;
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
}
.imgbox{
  height: 6vh;
}
.user_containers{
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 4vh 10vw;
    color: #fff;
}
.userinfo{
  width: 90%;
    text-align: start;
    padding-left: 6vw;
}
.subItem{
   color:#848DA3;
}
</style>
